<script setup>

import Card from "@/componets/Card.vue";
import {Lock, Setting, Switch} from "@element-plus/icons";
import {reactive} from "vue";
import {ref} from "vue";
import {get, post} from "@/net/index.js";
import {ElMessage} from "element-plus";

const form = reactive({
    password: '',
    new_password: '',
    new_password_repeat: ''
})

const validatePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== form.new_password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}

const rules = {
    password: [
        {required: true, message: '不能为空', trigger: 'blur'},
        {min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur']}
    ],
    new_password: [
        {required: true, message: '不能为空', trigger: 'blur'},
        {min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur']}
    ],
    new_password_repeat: [
        {required: true, message: '不能为空', trigger: 'blur'},
        {validator: validatePassword, trigger: ['blur', 'change']},
    ]
}

const formRef = ref()
const valid = ref(false)
const onValidate = (prop, isValid) => valid.value = isValid

function resetPassword() {
    formRef.value.validate((valid) => {
        if (valid) {
            post("api/user/change-password", form, () => {
                ElMessage.success("修改密码成功")
                formRef.value.resetFields()
            })
        } else {
            return false
        }
    })
}

const saving = ref(true)

const privacy = reactive({
    phone: false,
    email: false,
    wx: false,
    qq: false,
    gender: false
})
get('api/user/privacy', data => {
    privacy.phone = data.phone
    privacy.email = data.email
    privacy.wx = data.wx
    privacy.qq = data.qq
    privacy.gender = data.gender
    saving.value = false
})

function savePrivacy(type, status) {
    saving.value = true
    post('api/user/save-privacy', {type: type, status: status}, () => {
        ElMessage.success('保存成功')
        saving.value = false
    })
}

</script>

<template>
    <div style="margin: auto; max-width: 600px">
        <div style="margin-top: 20px">
            <card v-loading="saving" :icon="Setting" desc="那些内容可以被其他人看到" title="隐私设置">
                <div class="checkbox-list">
                    <el-checkbox v-model="privacy.phone" @change="savePrivacy('phone', privacy.phone)">
                        公开展示我的手机号
                    </el-checkbox>
                    <el-checkbox v-model="privacy.email" @change="savePrivacy('email', privacy.email)">
                        公开展示我的邮箱
                    </el-checkbox>
                    <el-checkbox v-model="privacy.wx" @change="savePrivacy('wx', privacy.wx)">公开展示我的微信号
                    </el-checkbox>
                    <el-checkbox v-model="privacy.qq" @change="savePrivacy('qq', privacy.qq)">公开展示我的QQ号
                    </el-checkbox>
                    <el-checkbox v-model="privacy.gender" @change="savePrivacy('gender', privacy.gender)">
                        公开展示我的性别
                    </el-checkbox>
                </div>
            </card>
            <card :icon="Setting" desc="请务必牢记您的密码" style="margin-top: 20px" title="修改密码">
                <el-form ref="formRef" :model="form" :rules="rules" style="margin: 20px" @validate="onValidate">

                    <el-form-item prop="password">
                        <el-input v-model="form.password" :prefix-icon="Lock" placeholder="当前密码"
                                  type="password"></el-input>
                    </el-form-item>

                    <el-form-item prop="new_password">
                        <el-input v-model="form.new_password" :prefix-icon="Lock" placeholder="新密码"
                                  type="password"></el-input>
                    </el-form-item>

                    <el-form-item prop="new_password_repeat">
                        <el-input v-model="form.new_password_repeat" :prefix-icon="Lock" placeholder="重新输入新密码"
                                  type="password"></el-input>
                    </el-form-item>

                    <div style="text-align: right">
                        <el-button :icon="Switch" plain style="text-align: center" type="success"
                                   @click="resetPassword">立即修改密码
                        </el-button>
                    </div>

                </el-form>
            </card>
        </div>
    </div>
</template>

<style scoped>

.checkbox-list {
    margin: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
}

</style>